<script setup>
import { ref } from "vue";
import { getQuestionTypeList, addReport, uploadphoto } from '@/api/report'
import myBack from '@/components/back.vue'
import { onMounted, onUnmounted } from 'vue';
// import { useRouter } from 'vue-router';

const result = ref('');
const showPicker = ref(false);

// const router = useRouter();

let inputtabstatus1 = ref(true)
let inputtabstatus2 = ref(false)


let tabClick=(type)=>{
        if(type ==0){
            console.log('00000')
            inputtabstatus1.value = true
            inputtabstatus2.value = false
        }else if(type == 1){
            console.log('11111')
            inputtabstatus1.value = false
            inputtabstatus2.value = true

        }
}


onMounted(() => {
  console.log('组件挂载了');
  document.body.style.backgroundColor = '#f0f0f0';
});
 
onUnmounted(() => {
  console.log('组件即将销毁');
  // 当组件卸载时执行
  document.body.classList.remove('#app');
    const storage = window.localStorage
    storage.clear()
});



</script>

<template >
    <div class="login-body">
        <myBack class="my-back" />
      <!-- <div>
        <p>Hello</p>
        <p>欢迎来到AI助手</p>
      </div> -->
      <img class="login-bgimg" src="../../assets/img/feedback01.png" alt="">
      <div class="login-content">
      <div class="login-card">
        <div class="login-title1" :class="inputtabstatus1 == true ? 'login-title1':'login-title2'">
            <p class="login-tab-avtive"  :class="inputtabstatus1 ==true ? 'login-tab-avtive':'login-input-notavtive'" @click="tabClick(0)" >手机号登录</p>
            <p class="login-tab-notavtive"  :class="inputtabstatus2 ==true ? 'login-tab-avtive':'login-input-notavtive'" @click="tabClick(1)">账号密码登录</p>
        </div>
        <div class="login-input-content" v-show="inputtabstatus1">
            <van-field v-model="username" placeholder="请输入手机号" />
            <van-field v-model="sms" center clearable placeholder="请输入短信验证码">
                <template #button>

                <!-- <van-button size="small" color="#0166be" >发送验证码</van-button> -->
                </template>
            </van-field>
            <van-button  class="login-btn" type="primary" >登录</van-button>
        </div>

        <div class="login-input-content" v-show="inputtabstatus2">
           
            <van-field v-model="username" placeholder="请输入用户名" />
            <van-field v-model="sms" type="password" placeholder="请输入密码"/>
            <van-button class="login-btn" type="primary" @click="showactive">登录</van-button>
        </div>
      </div>
      </div>
     
     
    </div>


</template>

<style src="./index.css">



</style>